<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue';
import type { Ref } from 'vue';
import { gethouseData } from '@/api/homemsg';

const router = useRouter()

interface iPro {
    housename: string
    houseid: string
    houseimage: string
    homeprice: string
    // number: Number
}

const houseList: Ref<iPro[]> = ref([])
onMounted(() => {
    gethouseData().then(res => {
        // console.log(res.data.data);
        houseList.value = res.data.data
        // console.log(houseList.value);

    })
})


//左侧按钮点击返回
function onClickLeft() {
    router.push('/user')
}
//右侧按钮点击发布
function onClickRight() {
    router.push('/login')
}

//点击进入详情
function homeContent() {
    router.push('/login')
}
</script>

<template>
    <!-- 头部导航 -->
    <van-nav-bar title="租房信息" left-text="返回" right-text="发布" left-arrow @click-left="onClickLeft"
        @click-right="onClickRight" />

    <!-- 搜索框 -->
    <van-search placeholder="请输入搜索关键词" show-action />

    <!-- 展示房源内容 -->
    <van-skeleton :animate="false" v-for="item in houseList" :key="item.houseid" @click="homeContent">
        <template #template>
            <div :style="{ display: 'flex', width: '100%' }">
                <img :src="item.houseimage" />
                <div :style="{ flex: 1, marginLeft: '16px' }">
                    <h6>{{ item.housename }}</h6>
                    <p>{{ item.houseid }}</p>
                    <span style="color:red;">￥{{ item.homeprice }}</span>
                </div>
            </div>
        </template>
    </van-skeleton>
</template>

<style lang="scss" scoped>
img {
    width: 80px;
    height: 80px;
    margin-top: 15px;
    margin-left: 15px;
    border-radius: 15px;
}
</style>